<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
    <script>
        window.onload = function () {
            // 创建一个控制对象
            const controlData = {
                rotationSpeed: 0.01,
                color: "#66ccff",
                wireframe: false,
                envMap: "无",
            };
            // 创建实例
            const gui = new dat.GUI();
            const f = gui.addFolder("配置");

            // 进度条
            // f.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01);
            f.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01);

            // 颜色选择器
            f.addColor(controlData, "color");

            // 下拉列表
            f.add(controlData, "envMap", ["无", "全反射", "慢反射"]);

            // 选择框
            f.add(controlData, "wireframe")
            f.open();
        };
    </script>
</body>

</html>